<template>
	<view class="myGroup">
		<!--导航条-->
		<view class="navbar">
			<text v-for="(item,index) in navbar" @click="navbarTap(index)">{{item}}</text>
		</view>
		 
		<!--全局-->
		<view v-show="currentTab==0">
			<myGroup :tushu="tushu" :navbar="navbar"></myGroup>
		</view>
		 
		<!--组局中-->
		<view v-show="currentTab==1">
			<myGroup :tushu="tushu" :navbar="navbar"></myGroup>
		</view>
		 
		<!--已成局-->
		<view v-show="currentTab==2">
			<myGroup :tushu="tushu" :navbar="navbar"></myGroup>
		</view>
		
		<!--已结束-->
		<view v-show="currentTab==3">
			<myGroup :tushu="tushu" :navbar="navbar"></myGroup>
		</view>
		
		<!--已解散-->
		<view v-show="currentTab==4">
			<myGroup :tushu="tushu" :navbar="navbar"></myGroup>
		</view>
	</view>
</template>

<script>
	import myGroup from '@/components/myGroup.vue'
	
	export default {
		components:{
			myGroup
		},
		data() {
			return {
				navbar: ['全局','已解散','组局中','已成局','已结束'],
				currentTab:0,
				
				tushu:[],//剧本
				
				dateStart:[],//开始日期
				dateEnd:[]//结束日期
			}
		},
		methods: {
			
			// 面包屑
			navbarTap(index){
				this.currentTab=index
				switch(index){
					case 0:
						// 查询用户参与的组局
						this.groupRequest('http://124.220.177.66:8082/juben/getUserGroup');
					break;
					case 1:
						// 已解散
						this.groupRequest('http://124.220.177.66:8082/juben/getOverdue');
					break;
					case 2:
						// 组局中
						this.groupRequest('http://124.220.177.66:8082/juben/getOnGoingGroup')
					break;
					case 3:
						// 已成局
						this.groupRequest('http://124.220.177.66:8082/juben/getFullGroup')
					break;
					case 4:
						// 已结束
						this.groupRequest('http://124.220.177.66:8082/juben/getInGameGroup')
					break;
					default:
						alert('wrong!')
					break;
				}
				
			},
			 
			// 处理日期格式
			str2time(v,i){
				let str = v;
				let year=str.slice(0,4);
				let month=Number(str.slice(5,7)) ;
				let day=str.slice(8,10);
				let dt =new Date(year,month-1,day);
				let weekDay=['天','一','二','三','四','五','六'];
				str=month+'月'+day+'日'+'\xa0'+'周'+weekDay[dt.getDay()]+'\xa0'+str.slice(11,16);
				console.log('处理玩的时间格式',str);
				return str;
			},
			
			// 将时间添加到tush...数组里每个对象中
			dateManage(res){
				this.dateStart.length = 0
				for(let i=0;i<res.data.data.length;i++){
					this.dateStart[i] = res.data.data[i].gameStartDateTime
					this.dateStart[i] = this.str2time(this.dateStart[i],i)
				}
		
				console.log('起始日期',this.dateStart);
				// =====================================================	
				let arrStart=[]
				for( let v in this.dateStart) {
					 arrStart[v] = this.dateStart[v]
				}
				let i = 0
				for( let v of this.tushu) {
					 v.startTime = arrStart[i++]
				}
				
				// =====================================================
				this.dateEnd.length = 0
				for(let i=0;i<res.data.data.length;i++){
					this.dateEnd[i] = res.data.data[i].gameEndDateTime
					this.dateEnd[i] = this.str2time(this.dateEnd[i],i)
				}
				
				console.log('结束日期',this.dateEnd);
				// =====================================================
				let arrEnd=[]
				for( let v in this.dateEnd) {
					 arrEnd[v] = this.dateEnd[v]
				}
				let j = 0
				for( let v of this.tushu) {
					 v.endTime = arrEnd[j++]
				}
			},
			
			// 请求封装---接口通过后测试
			groupRequest(apiUrl){
				this.tushu.length = 0;
				console.log('清空tushu',this.tushu);
				uni.request({
					url:apiUrl,
					method:"POST",
					data:{
						"openID": "wx999"
					},
					success: (res) => {
						console.log('查询用户参与的组局',res.data.data);
						this.tushu = res.data.data;	
						this.dateManage(res);
						console.log(this.tushu);
					}
				})
			}
			
		},
		onLoad(option) {
			console.log('接路由信息openID',option.item);
		},
		created() {	
			// 查询用户参与的组局
			this.groupRequest('http://124.220.177.66:8082/juben/getUserGroup')
		}
	}
</script>

<style lang="less">
	// 底色
	@bColor:#0D141F;
	// 主色
	@mColor:#623685;
	
	// ===============================================
	page{
		background-color: @bColor;
	}
	.myGroup{
		color: #fff;
		.navbar{
			border-bottom: 1px solid #ccc;
			display: flex;
			justify-content: center;
			text{
				margin-right: 25rpx;
			}
		}
	}
</style>
